<template>
	<view class="">
		<cs v-if="ver"></cs>
		<view class="wrap-box" v-else>
			<!-- 购物车弹出框 -->
			<u-popup v-model="show33" mode="bottom" border-radius="14" height="550rpx">
				<view class="shoppingCart">
					<text class="text">购物车</text>
					<text class="text1" @click="emptyShoppingCart">清空</text>
				</view>
				<view class="shoppingCart11" style="margin-top: 68rpx; height: 480rpx;">
					<view v-for="(item4, index4) in data2" :key="index4">
						<view class="info">
							<view class="left">
								<image
									:src="'https://whb.qianjitianxia.com' + item4.figure"
									mode=""
								></image>
							</view>
							<view class="right">
								<text class="r1">{{ item4.name }}</text>
								<view class="add">
									<text class="moeny">￥{{ item4.price }}</text>
									<view class="add1">
										<text class="textt" @click="numCarts(item4.id, item4.num)">
											-
										</text>
										<text class="num">{{ item4.num }}</text>
										<text class="textt" @click="numCarts1(item4.id, item4.num)">
											+
										</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-popup>
			<u-mask :show="show22" @click="show22 = false" z-index="999999">
				<view class="bulletFrm22">
					<text class="text">{{ huoqutklist.name }}</text>
					<view class="text1">
						<text>{{ huoqutklist.price }}</text>
						<image src="../../static/imgs/shanchu.png" mode=""></image>
					</view>
					<view class="text2">
						<image
							:src="'https://whb.qianjitianxia.com' + huoqutklist.figure"
							mode=""
						></image>
					</view>
					<view class="text3">
						<button open-type="share" class="u-reset-button">分享给好友</button>
					</view>
					<!-- <view class="text3">商品下架</view> -->
				</view>
			</u-mask>
			<u-mask :show="show11" @click="show11 = false" z-index="999999">
				<view class="bulletFrm">
					<view class="image">
						<image
							:src="'https://whb.qianjitianxia.com' + data.cover"
							mode="aspectFill"
						></image>
					</view>
					<view class="image1">
						<text class="text">{{ data.site }}</text>
						<view class="text1">
							<text>营业时间</text>
							<text>{{ data.business_hours }}</text>
						</view>
						<view class="text2">联系方式：{{ data.phone }}</view>
						<text class="text2">备注：{{ data.note }}</text>
					</view>
				</view>
			</u-mask>

			<view class="user-box">
				<view class="fixed" v-if="sid != ''">
					<view class="left" @click="show33 = true">
						<view class="">
							<text>合计:</text>
							<text>{{ cart }}</text>
						</view>
						<text class="text">满30起送</text>
					</view>
					<view class="right" @click="jisuan">去结算</view>
				</view>

				<view class="content">
					<view class="" style="height: 40rpx; background-color: #E9B562;"></view>
					<view class="positioning flex align-center">
						<u-icon name="map" color="#FFFFFF" style="margin: 0 30rpx;"></u-icon>
						<text>{{ city }}</text>
					</view>
					<view class="gongge flex justify-around">
						<view
							class="info flex flex-direction  justify-center align-center"
							@tap.stop="show11 = true"
						>
							<image
								style="width: 80rpx; height: 68rpx;"
								src="../../static/imgs/weihuobang3.png"
								mode=""
							></image>
							<text>门店消息</text>
						</view>
						<view
							class="info flex flex-direction  justify-center align-center"
							@tap="jump('/pages/user/ordrManagement')"
						>
							<image
								style="width: 59rpx; height: 68rpx;"
								src="../../static/imgs/weihuobang1.png"
								mode=""
							></image>
							<text>订单</text>
						</view>
						<view
							v-if="ismyShop"
							class="info flex flex-direction  justify-center align-center"
							@tap="jump('/pages/user/management')"
						>
							<image
								style="width: 59rpx; height: 68rpx;"
								src="../../static/imgs/wode11.png"
								mode=""
							></image>
							<text>我的店铺</text>
						</view>

						<view
							@click="untie"
							class="info flex flex-direction  justify-center align-center"
						>
							<image
								src="../../static/imgs/weihuobang2.png"
								mode=""
								style="width: 68rpx; height: 68rpx;"
							></image>
							<text>换店</text>
						</view>
					</view>
					<view v-if="sid != ''" class="shopp">
						<scroll-view
							scroll-y
							scroll-with-animation
							class="u-tab-view "
							:scroll-top="scrollTop"
						>
							<view
								v-for="(item1, index1) in classification"
								class="u-tab-item"
								:key="index1"
								:data-current="index1"
								:class="[current == index1 ? 'u-tab-item-active' : '']"
								@tap.stop="swichMenu(index1, item1.id)"
							>
								<text>{{ item1.name }}</text>
							</view>
						</scroll-view>

						<view class="shopp1">
							<view class="erjifenglei">
								<text
									:class="[current1 == -1 ? 'u-tab-item-active1' : '']"
									@tap.stop="swichMenu_a(-1, 0)"
								>
									全部
								</text>
								<text
									v-for="(item, index) in toplist"
									:key="index"
									@tap.stop="swichMenu1(index, item.id)"
									:class="[current1 == index ? 'u-tab-item-active1' : '']"
								>
									{{ item.name }}
								</text>
							</view>
							<block v-for="(item2, index2) in classification.length" :key="index2">
								<scroll-view
									scroll-y
									scroll-with-animation
									class="u-tab-view1  "
									v-if="current == index2"
								>
									<view
										class="u-tab-item1"
										v-for="(item3, index3) in data1"
										:key="index3"
									>
										<image
											:src="'https://whb.qianjitianxia.com' + item3.figure"
											mode=""
											@click="huoqutk(item3.id)"
										></image>
										<view class="list">
											<text class="text">{{ item3.name }}</text>
											<view class="list1">
												<text>￥{{ item3.price }}</text>
												<text @click="addToCart(item3.id)">+</text>
											</view>
										</view>
									</view>
								</scroll-view>
							</block>
						</view>
					</view>
				</view>

				<!-- 关注弹窗 -->
				<shopro-float-btn></shopro-float-btn>
				<!-- 连续弹窗提醒 -->
				<shopro-notice-modal></shopro-notice-modal>
				<!-- 登录提示 -->
				<shopro-login-modal></shopro-login-modal>
			</view>
			<!-- 自定义底部导航 -->
			<shopro-tabbar></shopro-tabbar>
		</view>
	</view>
</template>

<script>
import amap from '../../commonsdk/SDK/amap-wx.js';
import cs from '../../components/cs/cs.vue';

import shoproNoticeModal from '@/components/shopro-notice-modal/shopro-notice-modal.vue';
import { mapMutations, mapActions, mapState } from 'vuex';
export default {
	components: {
		cs
	},
	data() {
		return {
			platform: uni.getStorageSync('platform'), //当前平台。
			isRefresh: false, //更新
			scrollTop: 0, //页面滚动距离
			bgcolor: '',
			money: {},
			show: false,
			current: 0, // 预设当前项的值
			show11: false, //店铺信息
			show22: false, //商品信息
			show33: false, //购物车弹出框
			uid: '',
			sid: '',
			data: {}, // 用户信息
			classification: [], // 分类
			prc: 0, // 价格
			city: '',
			cart: 0,
			data1: [], //商品详情
			data2: [], // 购物车
			showinfo: false,
			rcvr: '',
			detailedCall: '',
			addr: '',
			residentialArea: '',
			huoqutklist: {},
			site: '',
			current1: -1,
			toplist: [],
			ddd: 0,
			zhuantai: '',
			item2: '',
			ismyShop: false, //  我的店铺
			shopdata: {
				page: 1,
				limit: 20,
				sid: 0,
				type: 0,
				er_type: 0
			},
			ver: false
		};
	},
	created() {
		console.log("111: ",111);
		this.$api('template', {})
			.then(result => {
				console.log("result: ",result);
			})
			.catch(err => {
				console.log("err: ",err);
				this.ver = true
			});
	},
	computed: {
		...mapState({
			initData: state => state.init.initData, //初始化数据
			template: state => state.init.templateData.user, //模板数据
			userInfo: state => state.user.userInfo,
			orderNum: state => state.user.orderNum,
			cartNum: state => state.cart.cartNum,
			forceOauth: state => state.user.forceOauth
		}),
		info() {
			if (this.initData) {
				return this.initData.info;
			}
		},
		popupUser() {
			if (this.initData.popup) {
				return this.initData.popup.content.user;
			}
		}
	},
	onPullDownRefresh() {
		this.init();
	},
	onShow() {
		this.$store.commit('CART_NUM');
		this.init();

		this.sid = uni.getStorageSync('sid').sid;
		this.zhuantai = uni.getStorageSync('sid').zhuantai;
		this.shoppingCartlist();
		//this.$forceUpdate();
	},
	watch: {
		$route() {
			if (this.zhuantai !== 1) {
				location.reload();
			}
		}
	},

	onLoad() {
		this.sid = uni.getStorageSync('sid');
		if (!this.sid) {
			this.jump('pages/user/listt44');
		}

		this.amapPlugin = new amap.AMapWX({
			//高德地图KEY，随时失效，请务必替换为自己的KEY，参考：http://ask.dcloud.net.cn/article/35070
			key: 'b9f002e72df0b071c51a8237c18b07a5'
		});

		// 获取信息中
		uni.showLoading({
			title: '获取信息中'
		});
		//定位地址
		this.amapPlugin.getRegeo({
			success: data => {
				// this.city = data[0].regeocodeData.addressComponent.city.replace(
				// 	/市/g,
				// 	''
				// ); //把"市"去掉
				this.city = data[0].name + data[0].desc;
			}
		});
		// // 因此提示信息
		uni.hideLoading();
		this.getUsers();
	},
	methods: {
		getMap() {
			this.zhuantai = 1;
			uni.chooseLocation({
				success: function(res) {
					var dizhi1 = {
						name1: res.name,
						name2: res.address + res.name
					};

					uni.setStorageSync('dizhi1', dizhi1);
					this.zhuantai = 2;
				}
			});
		},

		// 获取商品弹框
		async huoqutk(id) {
			const res = await this.$api('huoqutk', {
				cid: id
			});
			this.huoqutklist = res;
			this.show22 = true;
		},
		// 解绑
		async untie() {
			const res = await this.$api('untie', {
				sid: this.sid,
				uid: this.uid
			});

			this.jump('/pages/user/listt44');
		},
		//结算
		jisuan() {
			this.jump('/pages/user/confirmOrdr');
		},

		// 获取商家信息
		async getBus() {
			if (this.sid) {
				const data = await this.$api('busInfo1', {
					sid: this.sid
				});

				this.data = data.data;

				uni.setNavigationBarTitle({ title: data.name });

				//this.getClassification();
				this.shoppingCartlist();
			}
		},
		// 小卖部首页
		async gethm() {
			const data = await this.$api('gethm', {
				uid: this.uid,
				sid: uni.getStorageSync('sid').sid
			});
			if (data.list.length > 0) {
				this.classification = data.list;
				//this.cart = data.cart;
				this.shopdata.type = data.list[0].id;
				this.getGoods1();
				this.erji(data.list[0].id);
			}
			//判断是否显示我的店铺
			if (data.status == 1) {
				this.ismyShop = true;
			} else {
				this.ismyShop = false;
			}
		},
		// 获取商品详细
		async getGoods1() {
			this.shopdata.sid = this.sid;
			const data = await this.$api('getGoods1', this.shopdata);
			this.data1 = data.data;
		},
		// 获取商品详细

		//  添加购物车
		async addToCart(gid) {
			const data = await this.$api('addToCart', {
				sid: this.sid,
				uid: this.uid,
				gid: gid,
				num: 1
			});
			uni.$showMsg(data);
			this.shoppingCartlist();
			//this.gethm();
		},
		//  购物车列表
		async shoppingCartlist() {
			const data = await this.$api('shoppingCartlist', {
				sid: this.sid,
				uid: this.uid
			});
			this.cart = data.money;
			this.data2 = data.list;
		},
		//  清空
		async emptyShoppingCart() {
			const data = await this.$api('emptyShoppingCart', {
				sid: this.sid,
				uid: this.uid
			});
			uni.$showMsg('清空成功');
			//this.gethm();
			this.shoppingCartlist();
		},
		//  购物车数量+++++++++++
		async numCarts1(cid, num) {
			var num1 = num + 1;
			const data = await this.$api('numCarts', {
				cid: cid,
				num: num1
			});

			//this.gethm();
			this.shoppingCartlist();
		},
		// ------
		async numCarts(cid, num) {
			var num1 = num - 1;
			const data = await this.$api('numCarts', {
				cid: cid,
				num: num1
			});
			//this.gethm();
			this.shoppingCartlist();
		},

		// 获取二级分类
		async erji(id) {
			const res = await this.$api('erji', {
				fl_id: id,
				sid: this.sid
			});
			this.toplist = res;
			//this.item2 = res[0].id
		},
		// 获取用户的id
		async getUsers() {
			const res = await this.$api('user.info');
			this.uid = res.data.id;
			var uid = res.data.id;
			this.gethm(uid);
			this.getBus(res.data.id);
		},
		...mapActions(['getUserInfo', 'getOrderNum']),
		// 初始化
		init() {
			return Promise.all([this.getUserInfo(), this.getOrderNum()])
				.then(() => {
					uni.stopPullDownRefresh();
				})
				.catch(() => {
					uni.stopPullDownRefresh();
				});
		},

		jump(path, query) {
			this.$Router.push({
				path: path,
				query: query
			});
		},
		getbgcolor(e) {
			this.bgcolor = e;
		},
		//
		// 点击左边的栏目切换
		async swichMenu(index, item1) {
			this.shopdata.type = item1;
			this.shopdata.er_type = 0;
			this.getGoods1();
			this.item1 = item1;
			this.erji(item1);
			if (index == this.current) return;
			this.current = index;
			this.current1 = -1;
			// 如果为0，意味着尚未初始化
			if (this.menuHeight == 0 || this.menuItemHeight == 0) {
				await this.getElRect('menu-scroll-view', 'menuHeight');
				await this.getElRect('u-tab-item1', 'menuItemHeight');
			}
			// 将菜单菜单活动item垂直居中
			this.scrollTop =
				index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
		},
		//全部查询
		swichMenu_a(index, e) {
			this.current1 = index;
			this.shopdata.er_type = e;
			this.getGoods1();
		},
		// 点击左边的栏目切换
		async swichMenu1(index, item2) {
			//this.getGoods(item1);
			this.item2 = item2;
			this.shopdata.er_type = item2;
			this.getGoods1();
			if (index == this.current1) return;
			this.current1 = index;
			// 如果为0，意味着尚未初始化
			if (this.menuHeight == 0 || this.menuItemHeight == 0) {
				await this.getElRect('menu-scroll-view', 'menuHeight');
				await this.getElRect('u-tab-item1', 'menuItemHeight');
			}
			// 将菜单菜单活动item垂直居中
			this.scrollTop =
				index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
		},
		// 获取一个目标元素的高度
		getElRect(elClass, dataVal) {
			new Promise((resolve, reject) => {
				const query = uni.createSelectorQuery().in(this);
				query
					.select('.' + elClass)
					.fields({ size: true }, res => {
						// 如果节点尚未生成，res值为null，循环调用执行
						if (!res) {
							setTimeout(() => {
								this.getElRect(elClass);
							}, 10);
							return;
						}
						this[dataVal] = res.height;
					})
					.exec();
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.wrap-box {
	.info4 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 131rpx;
		margin-left: 29rpx;
		border-bottom: 2rpx solid #f1eded;

		text {
			font-size: 36rpx;
			font-family: 'Microsoft YaHei', PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		text:before {
			content: '*';
			color: #ff0000;
		}

		.inputStyle {
			font-size: 30rpx;
			font-family: 'Microsoft YaHei', PingFang SC;
			font-weight: 400;
			color: #999999;
		}
	}
	.u-drawer-content {
		position: relative;
	}
	.shoppingCart11 {
		overflow: scroll;
	}
	.shoppingCart {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 68rpx;
		line-height: 68rpx;
		z-index: 99999999;
		display: flex;
		// align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #e7e4e4;
		.text {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
		}
		.text1 {
			text-align: right;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ecc177;
		}
	}
	.info {
		height: 121rpx;
		display: flex;
		align-items: center;
		margin: 20rpx 30rpx 0 30rpx;
		.left {
			width: 121rpx;
			height: 121rpx;
			image {
				width: 121rpx;
				height: 121rpx;
			}
		}
		.right {
			margin-left: 18rpx;
			flex: 1;
			height: 121rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.r1 {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			.add {
				display: flex;
				justify-content: space-between;
				.moeny {
					width: 200rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ff0000;
				}
				.add1 {
					display: flex;
					align-items: center;
					justify-content: center;

					.textt {
						display: inline-block;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 30rpx;
						height: 30rpx;
						border-radius: 50%;
						background-color: #ebbc6f;
						color: #ffffff;
					}
					.num {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
						margin: 0 10rpx;
					}
				}
			}
		}
	}
	.uni-scroll-view {
		padding-bottom: 80rpx;
	}
	.pay {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 10rpx;
		width: 600rpx;
		height: 80rpx;
		background-color: #ebbe71;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50rpx;
	}
	.u-mask {
		display: flex;
		align-items: center;
		justify-content: center;

		.bulletFrm22 {
			width: 630rpx !important;
			//height: 590rpx !important;
			background: #ffffff !important;
			border-radius: 20rpx !important;
			overflow: hidden;
			padding: 29rpx;
			display: flex;
			flex-direction: column;
			.text {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			.text1 {
				height: 81rpx;
				margin-top: 19rpx;
				display: flex;
				justify-content: space-between;
				text {
					font-size: 60rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ff0000;
				}
				image {
					width: 81rpx;
					height: 81rpx;
				}
			}
			.text2 {
				margin-top: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				image {
					width: 251rpx;
					height: 251rpx;
				}
			}
			.text3 {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 300rpx;
				height: 60rpx;
				margin: 0 auto;
				background: linear-gradient(90deg, #e9b562, #eecb88);
				border-radius: 10rpx;
				margin-top: 29rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}
		}
	}
	/deep/.u-mask {
		display: flex;
		align-items: center;
		justify-content: center;
		.bulletFrm {
			width: 630rpx !important;
			margin: 0 auto;
			line-height: 50%;
			//height: 590rpx !important;
			background: #ffffff !important;
			border-radius: 20rpx !important;
			overflow: hidden;

			.image {
				width: 100%;
				height: 300rpx;
				//background-color: #366092;
				image {
					width: 100%;
					height: 300rpx;
				}
			}
			.image1 {
				position: relative;
				height: 290rpx;
				padding: 32rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.dianhu {
					position: absolute;
					top: 50%;
					right: 33rpx;
					transform: translateY(-50%);
					width: 121rpx;
					height: 121rpx;
					image {
						width: 121rpx;
						height: 121rpx;
					}
				}
				.text {
					// height: 77rpx;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
				.text1 {
					display: flex;
					align-items: center;
					// justify-content: ;
					text:nth-child(1) {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 160rpx;
						height: 60rpx;
						border: 1rpx solid #e9b562;
						border-radius: 10rpx;
						color: #e9b562;
						margin-right: 10rpx;
					}
					text:nth-child(2) {
						// width: 174px;
						// height: 23px;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #000000;
					}
				}
				.text2 {
					// width: 447px;
					// height: 28px;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}
		}
	}
	.user-box {
		.fixed {
			position: fixed;
			right: 30rpx;
			bottom: 150rpx;
			z-index: 999;
			width: 278rpx;
			height: 74rpx;
			background: #ffffff;
			box-shadow: 0rpx 0rpx 34rpx 1rpx rgba(151, 151, 151, 0.2);
			border-radius: 35rpx;
			overflow: hidden;

			display: flex;
			.left {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				view {
					display: flex;
					justify-content: center;
					text:nth-child(1) {
						font-size: 19rpx;
						font-family: SourceHanSansCN;
						font-weight: 400;
						color: #333333;
					}
					text:nth-child(2) {
						font-size: 19rpx;
						font-family: SourceHanSansCN;
						font-weight: 400;
						color: #ff6c64;
					}
				}
				.text {
					//display: block;
					// height: 13rpx;
					// line-height: 13rpx;
					font-size: 19rpx;
					font-family: SourceHanSansCN;

					color: #999999;
				}
			}
			.right {
				width: 113rpx;
				background-color: #e9b562;
				display: flex;
				align-items: center;
				justify-content: center;

				font-size: 21rpx;
				font-family: SourceHanSansCN;
				font-weight: 400;
				color: #ffffff;
			}
		}
		.content {
			.positioning {
				width: 750rpx;
				height: 50rpx;
				background: #ac8648;

				text {
					height: 23rpx;
					line-height: 23rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;
					white-space: nowrap;
					overflow: scroll;
				}
			}
			.gongge {
				width: 100vw;
				height: 170rpx;
				background-color: #e9b562;
				.info {
					image {
						width: 80rpx;
						height: 68rpx;
						margin-bottom: 10rpx;
					}
					text {
						height: 23rpx;
						line-height: 23rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #ffffff;
					}
				}
			}
			.shopp {
				width: 100vw;
				height: 100%;
				overflow: scroll;
				display: flex;

				.u-tab-view {
					width: 207rpx;

					height: 100%;
					overflow: scroll;
					.u-tab-item {
						height: 77rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						text {
							line-height: 24rpx;
							height: 24rpx;
							font-size: 25rpx;
							font-family: SourceHanSansCN;
							font-weight: 400;
							color: #333333;
						}
					}
					.u-tab-item-active {
						background-color: #fff;
						text {
							color: #e8a36c;
						}
					}
				}
				.shopp1 {
					width: 651rpx;
					padding-left: 15rpx;
					.erjifenglei {
						width: 543rpx;
						height: 60rpx;
						line-height: 60rpx;
						overflow: scroll;
						white-space: nowrap;
						//padding-left: 15rpx;

						text {
							padding: 5rpx 22rpx;
							display: inline-block;
							//width: 90rpx;
							//height: 50rpx;
							line-height: 44rpx;
							text-align: center;
							font-size: 25rpx;
							margin-right: 10rpx;
							border-radius: 10rpx;
							background-color: #fff;
						}

						.u-tab-item-active1 {
							color: #fff;

							background-color: #e8a36c;
						}
					}
					.u-tab-view1 {
						height: 800rpx;
						margin-top: 15rpx;
					}
					.u-tab-item1 {
						width: 100%;
						height: 160rpx;
						margin-bottom: 20rpx;
						display: flex;
						image {
							width: 160rpx;
							height: 160rpx;
							margin-right: 21rpx;
						}
						.list {
							display: flex;
							flex: 1;
							flex-direction: column;
							justify-content: space-between;
							.text {
								height: 28rpx;
								line-height: 28rpx;
								font-size: 30rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #333333;
							}
							.list1 {
								display: flex;
								justify-content: space-between;
								align-items: center;
								padding-right: 10rpx;
								text:nth-child(1) {
									height: 23rpx;

									font-size: 30rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #ff0000;
								}
								text:nth-child(2) {
									display: inline-block;
									width: 40rpx;
									display: flex;
									align-items: center;
									justify-content: center;

									background: linear-gradient(90deg, #e9b562, #eecb88);
									border-radius: 50%;
									color: #ffffff;
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>
